<div>
  % if I.ischanged:
  <span id="i-reboot-warning" class="ly-warning">${ _("Instance configuration has changed, please restart instance for new settings to be effective!") }</span>
  % endif
</div>

<div class="i-logo">
  <a href="${ reverse_url('admin:instance') }?id=${ I.id }"><img src="${ I.logourl }" /></a>
  <div class="i-status">
    ${ locale.translate(I.status_string) }
  </div>
  <ul>
    <li><a class="blue-submit" href="${ reverse_url('admin:instance') }?id=${ I.id }&action=change_owner">${ _("Change Owner") }</a></li>
    <li>${ _("Islocked") }
      <input type="checkbox"
         % if I.islocked:
         checked="checked"
         % endif
         onclick="simpleToggleCheckbox( this, '${ reverse_url('instance:islocked', I.id) }', '#islocked-notify')" /></li>
  </ul>
</div>

<% preid = 'i%s' % I.id %>
<div id="${ preid }-tabs" class="i-addons lytab-ui">
  <ul>
    <li><a href="#${ preid }-baseinfo">${ _("Baseinfo") }</a></li>
    <li><a href="#${ preid }-network">${ _("Network") }</a></li>
    <li><a href="#${ preid }-joblist">${ _("History") }</a></li>
  </ul>

  <div id="${ preid }-baseinfo" class="lytab-content">
    <table class="kv">
      <tbody>
    <tr>
      <td>${ _("CPU numbers") }</td>
      <td>${ I.cpus }</td>
    </tr>
    <tr>
      <td>${ _("Memory") }</td>
      <td>${ I.memory }</td>
    </tr>
    <tr>
      <td>${ _("Domain") }</td>
      <td>
        <span id="i-domain">
          % if I.domain:
          % if I.is_running:
          <a href="${ I.home_url(current_user) }" target="_blank">${ I.domain }</a>
          % else:
          ${ I.domain }
          % endif
          % endif
        </span>
      </td>
    </tr>
    <tr>
      <td>${ _("IP") }</td>
      <td>
        <span id="i-ip">
          % if I.work_ip:
          <a href="${ I.home_url(current_user, useip=True) }" target="_blank"><span id="lyinst-ip">${ I.work_ip }</span></a>
          % endif
        </span>
      </td>
    </tr>
    <tr>
      <td>${ _("Node") }</td>
      <td>
        % if I.node:
        <a href="${ reverse_url('admin:node') }?id=${ I.node.id }" target="_blank">${ I.node.hostname }</a>
        /
        ${ I.node.ip }
        /
        <a href="${ reverse_url('admin:instance') }?node=${ I.node.id }" title="Instances count" target="_blank">${ len(I.node.instances) }</a>
        % else:
        ${ _("no node server found.") }
        % endif
      </td>
    </tr>
      </tbody>
    </table>

    % for S in STORAGE_LIST:
    <table class="kv">
      <tr>
    <td>${ _("Type") }</td>
    <td>${ S.get('type') }</td>
      </tr>
      <tr>
    <td>${ _("Size") }</td>
    <td>${ S.get('size') }</td>
      </tr>
    </table>
    % endfor

    <h2>${ _("Summary") }</h2>
    <div class="i-summary">
      % if I.summary:
      ${ I.summary }
      % else:
      ${ _("No summary yet.") }
      % endif
    </div>
    <h2>${ _("Description") }</h2>
    <div class="i-description">
      % if I.description:
      ${ I.description_html }
      % else:
      ${ _("No description yet.") }
      % endif
    </div>
  </div>

  <div id="${ preid }-network" class="lytab-content">
    % if NETWORK_LIST:

    % for N in NETWORK_LIST:
    <table class="kv">
      <tbody>
    <tr>
      <td>${ _("Type") }</td>
      <td>${ N.get('type') }</td>
    </tr>
    <tr>
      <td>${ _("IP") }</td>
      <td>${ N.get('ip') }</td>
    </tr>
    <tr>
      <td>${ _("Gateway") }</td>
      <td>${ N.get('gateway') }</td>
    </tr>
    <tr>
      <td>${ _("Netmask") }</td>
      <td>${ N.get('netmask') }</td>
    </tr>
    <tr>
      <td>${ _("MAC") }</td>
      <td>${ N.get('mac') }</td>
    </tr>
      </tbody>
    </table>
    % endfor

    % else:
    <p class="c">${ _("Appliance Default Configuration") }</p>
    % endif
  </div>


  <div id="${ preid }-joblist" class="lytab-content">
    % if JOB_LIST.count():
    <table class="ly-table">
      <tbody>
    <tr>
          <th>${ _("Job ID") }</th>
          <th>${ _("User") }</th>
          <th>${ _("Action") }</th>
          <th>${ _("Result") }</th>
          <th>${ _("Start Time") }</th>
          <th>${ _("End Time") }</th>
    </tr>
    % for J in JOB_LIST:
    <tr>
          <td>${ J.id }</td>
          <td><a href="${ reverse_url('account:view', J.user.id) }">${ J.user.username }</a></td>
          <td>${ J.action_string }</td>
          <td>${ locale.translate(J.status_string) }</td>
          <td>${ ftime(J.started) }</td>
          <td>${ ftime(J.ended) }</td>
    </tr>
    % endfor
      </tbody>
    </table>
    % endif
  </div>
</div>

<script>
  $(function() {
    $("#${ preid }-tabs").tabs({ event: "mouseover" });
  });
</script>
